@import '../../../../assets/base/less/common.less';

.sys-main-bg-earth {
  height: 100%;
  .them-title {
    height: 6%;
    background-color: @contentBackgroundColor;
    padding: 0px 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    cursor: pointer;
    .current {
      border-color: #0000ff;
      // border: 1px solid #0000ff;
      color: #0000ff;
    }
  }
  .earth-body {
    .posChar {
      height: 20px;
      width: 614px;
      font-size: 16px;
      // background-color: #0000ff;
      position: absolute;
      right: 20vw;
      top: 30vh;
      z-index: 10;
      display: flex;
      justify-content: space-around;
    }
    margin-top: 1%;
    height: 92%;
    // background-color: @contentBackgroundColor;
    overflow-y: scroll;
    &::-webkit-scrollbar {
      display: none;
    }
    .body-chart {
      display: flex;
      .left-body {
        width: 25%;
      }
      .center-body {
        width: 49%;
        background-color: #fff;
        margin: 0 10px;
        height: 990px;
        .center-title {
          height: 45px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin: 0 15px;
        }
        .card {
          width: 100%;
          height: 160px;
          display: flex;
          justify-content: space-evenly;
          &-item {
            width: 32%;
            height: 95%;
            border: 1px solid #b1b2b3;
            display: flex;
            > img {
              height: 65%;
              margin-top: 20px;
              margin-right: 10px;
            }
            .svgImg {
              transform: rotate(90deg);
              margin-top: -3px;
              margin-left: 5px;
            }
          }
        }
      }
      .right-body {
        width: 25%;
      }
      .bloack1 {
        width: 100%;
        height: 320px;
        background-color: #fff;
        margin-bottom: 15px;
        // border: 1px solid red;
        &-title {
          border-bottom: 1px dashed #f2f2f2;
          height: 45px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          .title-name {
            line-height: 45px;
            margin-left: 15px;
            position: relative;
            font-weight: 600;
            &::after {
              content: '';
              background-color: #25b6b6;
              display: block;
              width: 3px;
              height: 16px;
              position: absolute;
              top: 15px;
              left: -15px;
            }
          }
          .img-div {
            width: 40px;
            height: 40px;
            background: url('../../../../assets/base/images/quanqou/u991.png')
              no-repeat 0 0;
            background-size: 40px;
            transform: rotate(90deg);
            cursor: pointer;
          }
        }
        .radio-pos {
          text-align: right;
          margin-top: 10px;
          margin-right: 10px;
        }
        .ant-radio-button-wrapper {
          height: 28px;
          line-height: 28px;
        }
      }
      .center-body1 {
        width: 49%;
        background-color: #fff;
        margin: 0 10px;
        height: 655px;
        .center-title {
          height: 45px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin: 0 15px;
        }
        .card {
          width: 100%;
          height: 160px;
          display: flex;
          justify-content: space-evenly;
          &-item {
            width: 32%;
            height: 95%;
            border: 1px solid #b1b2b3;
            display: flex;
            > img {
              height: 65%;
              margin-top: 20px;
              margin-right: 10px;
            }
            .svgImg {
              transform: rotate(90deg);
              margin-top: -3px;
              margin-left: 5px;
            }
          }
        }
      }
    }
    .earth-bottom {
      height: 450px;
      background-color: #fff;
      .btm-title {
        height: 45px;
        border-bottom: 1px dashed #f2f2f2;
        line-height: 45px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .title-name {
          line-height: 45px;
          margin-left: 15px;
          position: relative;
          font-weight: 600;
        }
        .img-div {
          width: 40px;
          height: 40px;
          background: url('../../../../assets/base/images/quanqou/u991.png')
            no-repeat 0 0;
          background-size: 40px;
          transform: rotate(90deg);
          cursor: pointer;
        }
      }
      .btm-body {
        padding: 10px;
      }
    }
    .earth-bottom1 {
      height: 400px;
      overflow: auto;
      background-color: #fff;
      .btm-title {
        height: 45px;
        border-bottom: 1px dashed #f2f2f2;
        line-height: 45px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .title-name {
          line-height: 45px;
          margin-left: 15px;
          position: relative;
          font-weight: 600;
        }
        .img-div {
          width: 40px;
          height: 40px;
          background: url('../../../../assets/base/images/quanqou/u991.png')
            no-repeat 0 0;
          background-size: 40px;
          transform: rotate(90deg);
          cursor: pointer;
        }
      }
      .btm-body {
        padding: 10px;
      }
    }
    .details {
      height: 100%;
      background-color: #fff;
      .details-title {
        height: 45px;
        border-bottom: 1px dashed #f2f2f2;
        line-height: 45px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .title-name {
          :nth-child(1) {
            line-height: 45px;
            margin-left: 15px;
            position: relative;
            font-weight: 600;
          }
          img {
            width: 16px;
            height: 16px;
            margin-left: 10px;
            cursor: pointer;
          }
          display: flex;
          align-items: center;
        }
        .img-div {
          width: 40px;
          height: 40px;
          background: url('../../../../assets/base/images/quanqou/u991.png')
            no-repeat 0 0;
          background-size: 40px;
          // transform: rotate(90deg);
          cursor: pointer;
        }
      }
      .selectForm {
        margin-top: 10px;
        margin-right: 30px;
        display: flex;
        justify-content: end;
        align-items: center;
      }
    }
  }
  .earth-body1 {
    margin-top: 1%;
    height: 92%;
    // background-color: @contentBackgroundColor;
    overflow-y: scroll;
    &::-webkit-scrollbar {
      display: none;
    }
    .body-chart {
      display: flex;
      .left-body {
        width: 25%;
      }
      .center-body {
        width: 49%;
        background-color: #fff;
        margin: 0 10px;
        height: 990px;
        .center-title {
          height: 45px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin: 0 15px;
        }
        .card {
          width: 100%;
          height: 160px;
          display: flex;
          justify-content: space-evenly;
          &-item {
            width: 32%;
            height: 95%;
            border: 1px solid #b1b2b3;
            display: flex;
            > img {
              height: 65%;
              margin-top: 20px;
              margin-right: 10px;
            }
            .svgImg {
              transform: rotate(90deg);
              margin-top: -3px;
              margin-left: 5px;
            }
          }
        }
        #u1044_img {
          border-width: 0px;
          position: absolute;
          left: 0px;
          top: 0px;
          width: 763px;
          height: 388px;
        }
      }
      .right-body {
        width: 25%;
      }
      .bloack1 {
        width: 100%;
        height: 370px;
        background-color: #fff;
        margin-bottom: 15px;
        // border: 1px solid red;
        &-title {
          border-bottom: 1px dashed #f2f2f2;
          height: 45px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          .title-name {
            line-height: 45px;
            margin-left: 15px;
            position: relative;
            font-weight: 600;
            &::after {
              content: '';
              background-color: #25b6b6;
              display: block;
              width: 3px;
              height: 16px;
              position: absolute;
              top: 15px;
              left: -15px;
            }
          }
          .img-div {
            width: 40px;
            height: 40px;
            background: url('../../../../assets/base/images/quanqou/u991.png')
              no-repeat 0 0;
            background-size: 40px;
            transform: rotate(90deg);
            cursor: pointer;
          }
        }
        .radio-pos {
          text-align: right;
          margin-top: 10px;
          margin-right: 10px;
        }

        .ant-radio-button-wrapper {
          height: 28px;
          line-height: 28px;
        }
      }
      .center-body1 {
        width: 49%;
        background-color: #fff;
        margin: 0 10px;
        height: 755px;
        .center-title {
          height: 45px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin: 0 15px;
        }
        .card {
          width: 100%;
          height: 160px;
          display: flex;
          justify-content: space-evenly;
          &-item {
            width: 32%;
            height: 95%;
            border: 1px solid #b1b2b3;
            display: flex;
            > img {
              height: 65%;
              margin-top: 20px;
              margin-right: 10px;
            }
            .svgImg {
              transform: rotate(90deg);
              margin-top: -3px;
              margin-left: 5px;
            }
          }
        }
      }
    }
    .earth-bottom {
      height: 450px;
      background-color: #fff;
      .btm-title {
        height: 45px;
        border-bottom: 1px dashed #f2f2f2;
        line-height: 45px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .title-name {
          line-height: 45px;
          margin-left: 15px;
          position: relative;
          font-weight: 600;
        }
        .img-div {
          width: 40px;
          height: 40px;
          background: url('../../../../assets/base/images/quanqou/u991.png')
            no-repeat 0 0;
          background-size: 40px;
          transform: rotate(90deg);
          cursor: pointer;
        }
      }
      .btm-body {
        padding: 10px;
      }
    }
    .earth-bottom1 {
      height: 400px;
      overflow: auto;
      background-color: #fff;
      .btm-title {
        height: 45px;
        border-bottom: 1px dashed #f2f2f2;
        line-height: 45px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .title-name {
          line-height: 45px;
          margin-left: 15px;
          position: relative;
          font-weight: 600;
        }
        .img-div {
          width: 40px;
          height: 40px;
          background: url('../../../../assets/base/images/quanqou/u991.png')
            no-repeat 0 0;
          background-size: 40px;
          transform: rotate(90deg);
          cursor: pointer;
        }
      }
      .btm-body {
        padding: 10px;
      }
    }
    .details {
      height: 100%;
      background-color: #fff;
      .details-title {
        height: 45px;
        border-bottom: 1px dashed #f2f2f2;
        line-height: 45px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .title-name {
          :nth-child(1) {
            line-height: 45px;
            margin-left: 15px;
            position: relative;
            font-weight: 600;
          }
          img {
            width: 16px;
            height: 16px;
            margin-left: 10px;
            cursor: pointer;
          }
          display: flex;
          align-items: center;
        }
        .img-div {
          width: 40px;
          height: 40px;
          background: url('../../../../assets/base/images/quanqou/u991.png')
            no-repeat 0 0;
          background-size: 40px;
          // transform: rotate(90deg);
          cursor: pointer;
        }
      }
      .selectForm {
        margin-top: 10px;
        margin-right: 30px;
        display: flex;
        justify-content: end;
        align-items: center;
      }
    }
  }
}

.trade-content {
  // background: #e9eaed;
  color: #000;
  /* padding: 10px; */
  width: 100%;
  height: 100%;
  // top: 0;
  // left: 0;
  padding-left: 10px;
  // position: absolute;
  box-sizing: border-box;
  overflow: hidden;
  .top-box {
      width: 100%;
      margin-bottom: 10px;
      // height: 120px;
      // background: #fff;
      .left-box {
          width: calc(50% - 5px);
          display: inline-block;
          background: #fff;
          margin-right: 10px;
          padding: 10px 35px;
          box-sizing: border-box;
          .count-box {
              .title {
                  font-size: 15px;
              }
              .counts-box {
                  margin-top: 20px;
                  text-align: center;
                  .count {
                      color: #25B6B6;
                      font-size: 40px;
                  }
                  .unit {
                      font-size: 12px;
                      margin-left: 30px;
                  }
              }
              .percent-box {
                  text-align: right;
                  .left {
                      margin-right: 20px;
                  }
                  .right {
                      color: #D9001B;
                  }
              }
          }
      }
      .right-box {
          width: calc(50% - 5px);
          display: inline-block;
          background: #fff;
          padding: 10px 35px;
          box-sizing: border-box;
          .count-box {
              .title {
                  font-size: 15px;
              }
              .counts-box {
                  margin-top: 20px;
                  text-align: center;
                  .count {
                      color: #25B6B6;
                      font-size: 40px;
                  }
                  .unit {
                      font-size: 12px;
                      margin-left: 30px;
                  }
              }
              .percent-box {
                  text-align: right;
                  .left {
                      margin-right: 20px;
                  }
                  .right {
                      color: #D9001B;
                  }
              }
          }
      }
  }
  .center-box {
      width: 100%;
      height: calc((100% - 190px) / 2);
      padding: 10px 35px;
      box-sizing: border-box;
      margin-bottom: 10px;
      background: #fff;
      .title {
          font-size: 15px;
      }
      #tradeCenterChart {
          width: 100%;
          height: calc(100% - 50px);
          margin-top: 20px;
      }
  }
  .bottom-box {
      width: 100%;
      height: calc((100% - 180px) / 2);
      padding: 10px 35px;
      box-sizing: border-box;
      background: #fff;
      .title {
          font-size: 15px;
      }
      #tradeBottomChart {
          width: 100%;
          height: calc(100% - 50px);
          margin-top: 20px;
      }
  }
}
